<template>
  <div style="padding:  0 10px 10px 0">
    <div class="title">
      您将对以下已选择的{{ ruleForm.returnCarDepositList ? ruleForm.returnCarDepositList.length : 0 }}个订单进行合并退保证金操作？
    </div>

    <el-table :data="ruleForm.returnCarDepositList" border>

      <el-table-column show-overflow-tooltip align="center" label="主订单" min-width="220">
        <template #default="{row}">
          <el-button type="text" @click="handleTo(row)"> {{ row.orderCarNo || '-' }}</el-button>
        </template>
      </el-table-column>

      <el-table-column show-overflow-tooltip align="center" label="车牌号" min-width="120">
        <template #default="{row}">
          <span>{{ row.carNo || '-' }}</span>
        </template>
      </el-table-column>

      <el-table-column show-overflow-tooltip align="center" label="所属公司" min-width="220">
        <template #default="{row}">
          <span>{{ row.companyName || '-' }}</span>
        </template>
      </el-table-column>

      <el-table-column show-overflow-tooltip align="center" label="客户名称" min-width="220">
        <template #default="{row}">
          <span>{{ row.customerName || '-' }}</span>
        </template>
      </el-table-column>

      <el-table-column show-overflow-tooltip align="center" label="还车时间" min-width="140">
        <template #default="{row}">
          <span>{{ row.returnCarDate || '-' }}</span>
        </template>
      </el-table-column>

      <el-table-column show-overflow-tooltip align="center" label="还车类型" min-width="120">
        <template #default="{row}">
          {{ selectDictLabel(dict.type.return_car_type, row.returnCategory) }}
        </template>
      </el-table-column>

      <el-table-column show-overflow-tooltip align="center" label="欠租" min-width="120">
        <template #default="{row}">
          {{ format_thousand(row.rentArrears) }}
        </template>
      </el-table-column>

      <el-table-column show-overflow-tooltip align="center" label="尾款" min-width="120">
        <template #default="{row}">
          {{ format_thousand(row.balancePayment) }}
        </template>
      </el-table-column>

      <el-table-column show-overflow-tooltip align="center" label="车损费" min-width="120">
        <template #default="{row}">
          {{ format_thousand(row.vehicleDamageFee) }}
        </template>
      </el-table-column>

      <el-table-column show-overflow-tooltip align="center" label="加速折旧费" min-width="120">
        <template #default="{row}">
          {{ format_thousand(row.depreciation) }}
        </template>
      </el-table-column>

      <el-table-column show-overflow-tooltip align="center" label="违章费用" min-width="120">
        <template #default="{row}">
          {{ format_thousand(row.violationFee) }}
        </template>
      </el-table-column>

      <el-table-column show-overflow-tooltip align="center" label="违约金" min-width="120">
        <template #default="{row}">
          {{ format_thousand(row.defaultDeduction) }}
        </template>
      </el-table-column>

      <el-table-column show-overflow-tooltip align="center" label="超里程费" min-width="120">
        <template #default="{row}">
          {{ format_thousand(row.overMileageFee) }}
        </template>
      </el-table-column>

      <el-table-column show-overflow-tooltip align="center" label="其他扣款费用" min-width="120">
        <template #default="{row}">
          {{ format_thousand(row.otherFee) }}
        </template>
      </el-table-column>

      <el-table-column show-overflow-tooltip align="center" label="客户理赔款" min-width="120">
        <template #default="{row}">
          {{ format_thousand(row.compensationClaims) }}
        </template>
      </el-table-column>

      <el-table-column show-overflow-tooltip align="center" label="保证金" min-width="120">
        <template #default="{row}">
          {{ format_thousand(row.deposit) }}
        </template>
      </el-table-column>


    </el-table>
    <div class="foot">
      <span>总计：{{ format_thousand(ruleForm.totalFee) }}元</span>
      <span>已缴费：{{ format_thousand(payeeFee) }}元</span>
      <span>剩余未缴纳：{{ format_thousand(waitAmount) }}元</span>
    </div>
  </div>
</template>

<script>
import * as apis from "@/api/returnMargin";
import * as outInventoryApi from '@/api/carInventory/outInventory'
import {toNumberSub} from "@/utils/utils"

export default {
  name: 'mergeOrderTable',//合并退保证金表格
  dicts: ['return_car_type'],
  props: {
    ruleForm: {
      type: Object,
      default: {}
    },
    typeBoole: {
      type: Number,
      default: 1
    }
  },
  computed: {},
  watch: {
    'ruleForm.returnCarDepositList': {
      handler(val) {
        if (val && val.length && this.num === 0) {
          this.num = 1
          let ids = val.map(item => item.returnCarDepositId)
          this.handleWaitAmount(ids)
        }
      },
      immediate: true,
    }
  },
  data() {
    return {
      waitAmount: '',
      payeeFee: '',
      num: 0
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleWaitAmount(id) {
      apis?.queryWaitAmountById(id).then(res => {
        if (res.code === 200) {
          this.waitAmount = res.data
          this.payeeFee = toNumberSub(Number(this.ruleForm.totalFee), Number(this.waitAmount)) //  Number(this.ruleForm.totalFee) - Number(this.waitAmount)
          this.$emit('waitAmountInput', this.waitAmount)
        }
      })
    },

    async handleTo(val) {
      if (!val) return
      try {
        let res = await outInventoryApi.outOrderDetails(val)
        if (res.code === 200) {
          this.$router.push({
            name: 'SuborderDetail',
            query: {
              id: res.data.orderCarId,
              orderId: res.data.orderCode,
            },
          })
        }
      } catch (e) {
        console.error(e)
      }
    }
  },
};
</script>

<style scoped lang="scss">
.title {
  padding: 5px 0 10px 0;
  color: rgb(140, 140, 140);
  font-family: "Arial Normal", Arial, sans-serif;
  font-size: 20px;
}

.foot {
  padding-top: 10px;
  color: red;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
</style>


